<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>亿码互联管理系统</el-breadcrumb-item>
        <el-breadcrumb-item> 收藏的码 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mt-4">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="二维码" name="二维码">
          <el-table
            :data="list"
            :header-cell-style="{ background: 'rgba(251, 191, 36,1)', color: '#fff', fontWeight: 'bold' }"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <!-- <el-table-column width="50">
          <template #default="scope">
            <div class="text-center">
              <div
                style="
                  width: 20px;
                  height: 20px;
                  margin-left: 10px;
                  line-height: 20px;
                  background: #ccc;
                  border-radius: 50%;
                "
              >
                {{ scope.$index + 1 }}
              </div>
            </div>
          </template>
        </el-table-column> -->
            <!-- <el-table-column width="60">
          <template #default="scope">
            <div v-if="parseJson(scope.row.eqJson)">
              <el-tag type="primary" v-if="scope.row.eqType === 0" effect="dark">图文</el-tag>
              <el-tag type="danger" v-if="scope.row.eqType === 1" effect="dark">表单</el-tag>
              <el-tag type="success" v-if="scope.row.eqType === 2" effect="dark">名片</el-tag>
            </div>
            <div v-else>
              <el-tag type="warning" effect="dark">新版</el-tag>
            </div>
          </template>
        </el-table-column> -->
            <el-table-column label="二维码" width="150" header-align="center">
              <template #default="scope">
                <img :src="scope.row.qrcodeUrl" class="h-20 w-20" style="margin: 0 auto" @click="openImg(scope.row)" />
              </template>
            </el-table-column>

            <el-table-column label="标题">
              <template #default="scope">
                <div>
                  {{ scope.row.tmplName }}
                </div>

                <el-text class="mx-1" size="small" v-if="scope.row.template"
                  ><el-icon> <Platform /> </el-icon
                  >{{ scope.row.template ? '[' + JSON.parse(scope.row.template).tName + ']' : '' }}</el-text
                >
              </template>
            </el-table-column>

            <el-table-column label="作者" width="250">
              <template #default="scope">
                {{ scope.row.uNickname }}
              </template>
            </el-table-column>

            <el-table-column label="操作" width="250">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" content="预览">
                  <el-button type="primary" icon="View" circle @click="view(scope.row)" />
                </el-tooltip>
                <!-- <el-tooltip class="box-item" effect="dark" content="修改二维码">
              <el-button type="success" :icon="Edit" circle @click="edit(scope.row)" />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除二维码">
              <el-button type="danger" :icon="Delete" circle @click="del(scope.row)" />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="扫描记录">
              <el-button type="info" :icon="List" circle @click="openitem2(scope.row)" />
            </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="恢复">
                  <el-button type="info" icon="RefreshLeft" circle @click="openitem(scope.row)" />
                </el-tooltip>-->
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="模版" name="模版">
          <el-table
            :data="list2"
            :header-cell-style="{ background: 'rgba(251, 191, 36,1)', color: '#fff', fontWeight: 'bold' }"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <!-- <el-table-column width="50">
          <template #default="scope">
            <div class="text-center">
              <div
                style="
                  width: 20px;
                  height: 20px;
                  margin-left: 10px;
                  line-height: 20px;
                  background: #ccc;
                  border-radius: 50%;
                "
              >
                {{ scope.$index + 1 }}
              </div>
            </div>
          </template>
        </el-table-column> -->
            <!-- <el-table-column width="60">
          <template #default="scope">
            <div v-if="parseJson(scope.row.eqJson)">
              <el-tag type="primary" v-if="scope.row.eqType === 0" effect="dark">图文</el-tag>
              <el-tag type="danger" v-if="scope.row.eqType === 1" effect="dark">表单</el-tag>
              <el-tag type="success" v-if="scope.row.eqType === 2" effect="dark">名片</el-tag>
            </div>
            <div v-else>
              <el-tag type="warning" effect="dark">新版</el-tag>
            </div>
          </template>
        </el-table-column>
            <el-table-column label="二维码" width="150" header-align="center">
              <template #default="scope">
                <img :src="scope.row.qrcodeUrl" class="h-20 w-20" style="margin: 0 auto" @click="openImg(scope.row)" />
              </template>
            </el-table-column> -->

            <el-table-column label="标题">
              <template #default="scope">
                <div>
                  {{ scope.row.tmplName }}
                </div>

                <el-text class="mx-1" size="small" v-if="scope.row.template"
                  ><el-icon> <Platform /> </el-icon
                  >{{ scope.row.template ? '[' + JSON.parse(scope.row.template).tName + ']' : '' }}</el-text
                >
              </template>
            </el-table-column>

            <el-table-column label="作者" width="250">
              <template #default="scope">
                {{ scope.row.uNickname }}
              </template>
            </el-table-column>

            <el-table-column label="操作" width="250">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" content="预览">
                  <el-button type="primary" icon="View" circle @click="view2(scope.row)" />
                </el-tooltip>
                <!--<el-tooltip class="box-item" effect="dark" content="修改二维码">
              <el-button type="success" :icon="Edit" circle @click="edit(scope.row)" />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除二维码">
              <el-button type="danger" :icon="Delete" circle @click="del(scope.row)" />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="扫描记录">
              <el-button type="info" :icon="List" circle @click="openitem2(scope.row)" />
            </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="恢复">
                  <el-button type="info" icon="RefreshLeft" circle @click="openitem(scope.row)" />
                </el-tooltip>-->
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog class="no-header-dialog" v-model="perviewdialogVisible" title="二维码预览" width="400">
      <div class="relative" style="height: 720px">
        <div class="absolute top-0 right-0 cursor-pointer" @click="perviewdialogVisible = false">
          <el-icon color="#fff" size="20"><CircleClose /></el-icon>
        </div>
        <perview :list="list3" :title="title" />
        <div style="clear: both"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { i15_favorites_list, i15_favorites_list2, getQrcodebyid, i12_template_one } from '@/api/index.js';
import perview from '@/views/editor/components/preview.vue';
const route = useRoute();
const activeName = ref('二维码');
const list = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const title = ref('');
const perviewdialogVisible = ref(false);

function getData() {
  i15_favorites_list().then((res) => {
    list.value = res.data.data.listdata;
  });

  i15_favorites_list2().then((res) => {
    list2.value = res.data.data.listdata;
  });
}
function view(o) {
  list3.value = [];
  getQrcodebyid(o.ftId).then((res) => {
    title.value = res.data.data.onedata.eqTitle;

    list3.value = JSON.parse(res.data.data.onedata.eqJson);
    console.log('res.data.data.onedata.eqJson:', res.data.data.onedata.eqJson);

    perviewdialogVisible.value = true;
  });
}
function view2(o) {
  console.log('o:', o);
  list3.value = [];
  i12_template_one(o.ftId).then((res) => {
    title.value = res.data.data.onedata.eqTitle;

    list3.value = JSON.parse(res.data.data.onedata.tJson);
    console.log('res.data.data.onedata.tJson:', res.data.data.onedata.tJson);

    perviewdialogVisible.value = true;
  });
}
onMounted(() => {
  getData();
});
</script>
<style scoped lang="less"></style>
